<template>
  <div style="width:100%;height:100%;">
    <div class="home_top">
      <top ref="top" :setlogo="false"></top>
    </div>
    <div id="select-organization">
      <div class="box-mmssgg">
        <div class="row">
          Hi，{{nickName}} 你好！
        </div>
        <div class="row" style="font-size:0.16rem;">
          请选择进入机构：
        </div>
      </div>
      <transition name="form-fade" mode="in-out">
        <div class="selectOrg-container">
         
          <div class="box-org">
            <div class="orgItem" v-for="(row,index) in orgList"
            :key="index" :index="index%3"
            @click="changeOrg(row.orgId)"
            >
            <div class="txt-box">{{row.orgName}}</div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
  
</template>

<script>
import menuTool from "@/js/common/menu";
import setCampusTime from '@/js/common/setCampusTime';
import top from './top'
var vm;
export default {
  data: function() {
    return {
      userName:'',
      nickName:'',
      userInfo:{},
      orgList:[]
    };
  },
  components: {top},
  computed: {},
  methods: {
    /**切换机构 */
    changeOrg(id){
      api.switchOrg({orgId:id}).then(function(data){
        if(data.resultCode==2000){
          return api.loginUser();
        }
        return Promise.reject();
      })
      .then(function(data){
        //登录验证通过,保存登录用户信息
        tool.setItem(lsKey.user, data.user, true);
        //全局用户角色级别
        vm.$store.commit("setRoleMode", data.user.roleMode); 
        vm.enterOrg(data.user);
      });
    },
    enterOrg(user){
      // debugger
      if (user.campusList.length > 0) {
        //获取本校区上课时间
        let param = {
          campusId: user.campusList[0].campusId
        };
        api.getListOfCampus(param).then(function(data) {
          setCampusTime(data.list);
        });
        //默认用户所属校区的第一个为当前校区,保存校区id至状态管理
        vm.$store.commit("setCampusId", user.campusList[0].campusId);
        this.getMenu();
      }
      else{
        //用户无关联校区,各个角色对应的处理
        if (user.roleMode == 0) {
          //平台管理员
          this.getMenu();
        } else if (user.roleMode == 1) {
          
          if (user.childRoleMode == null) {
            //机构管理员
            tool.message2({
              showClose: true,
              message: "该账号关联的机构暂无校区，请新增校区",
              type: "warning"
            });
            vm.$refs.crateCampus.init({});
            router.push('/login');
          } else {
            //督导级角色用户
            this.getMenu();
          }
        } else {
          //其他角色:校区管理员,普通角色...
          //清除token,就当没登录
          tool.removeItem(lsKey.token);
          tool.message2({
            showClose: true,
            message: "该账号没有关联校区,请联系管理员",
            type: "warning"
          });
          router.push('/login');
        }
      }
      
        
    },
    getMenu(){
      api.menu()
      .then(function(data) {
        //根据菜单设置路由,获取权限数据
        var permit = menuTool.getPermit(data.menuList);
        vm.$store.commit("setPermit", permit);

        //根据菜单获取导航数据
        var navObj = menuTool.getNav(data.menuList);
        vm.$store.commit("setNav", navObj.nav);
        vm.$store.commit("setFirstPath", navObj.firstPath);

        //首个路径
        var path = navObj.firstPath;
        if (path) {
          router.push(path);
        }
      })
      .catch(function() {});
    }
  },
  mounted: function() {
    let user=tool.getItem(lsKey.user, true);
    this.userInfo=user;
    // debugger
    this.orgList=user.orgList;
    this.userName=user.username;
    this.nickName=user.nickName;
    this.$refs['top'].hideMessage();
    this.$refs['top'].hideCampusList();
  },
  created: function() {
    vm = this;
  }
};
</script>
<style lang="scss" scoped>
  .home_top{
    top: 0;
    margin:0;
    width: 100%;
    min-width: 18.4rem;
    height: 0.82rem;
  }
  #select-organization{
    background-image: url(../../assets/img/select_org/bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: calc( 100% - 0.82rem );
    margin: 0;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    .box-mmssgg{
      // margin: 0.3rem;
      height: 1.7rem;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      align-content: flex-end;
      flex-wrap: wrap;
      .row{
        width: 100%;
        // margin: 0.16rem 0;
        height: 0.5rem;
        text-align: center;
      }
    }
    .selectOrg-container{
      padding: 0.5rem;
      color: #333333;
      width: 12.46rem;
      margin: 0 auto;
      .box-org{
        display: flex;
        flex-wrap: wrap;
        color: #ffffff;
        font-size: 0.26rem;
        .orgItem{
          // margin: 0.1rem;
          width: 3.82rem;
          height: 1.82rem;
          cursor: pointer;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          overflow: hidden;
          .txt-box{
            width: 2.64rem;
            margin-left: 0.5rem;
            height: 1.58rem;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .orgItem[ index = '1' ]{
          background-image: url(../../assets/img/select_org/1.png);
        }
        .orgItem[ index = '2' ]{
          background-image: url(../../assets/img/select_org/2.png);
        }
        .orgItem[ index = '0' ]{
          background-image: url(../../assets/img/select_org/3.png);
        }
        .orgItem[ index = '1' ]:hover{
          background-image: url(../../assets/img/select_org/1_selected.png);
        }
        .orgItem[ index = '2' ]:hover{
          background-image: url(../../assets/img/select_org/2_selected.png);
        }
        .orgItem[ index = '0' ]:hover{
          background-image: url(../../assets/img/select_org/3_selected.png);
        }
        
      }
    }
  }
</style>